<ion-header>
  <ion-navbar>
    <ion-title>image to bitmap array</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div>
    <ion-grid>
      <ion-row>
        <ion-col col-xl-2 col-lg-4 col-sm-6 col-md-6>
          <ion-item>
            <input type="file" name="myPhoto" (change)="choseImage($event)" />
          </ion-item>
          <ion-item>
            <ion-label>切换大小端</ion-label>
            <ion-toggle [(ngModel)]="endian" (ngModelChange)="convert($event)"></ion-toggle>
          </ion-item>
          <ion-item>
            <ion-label>颜色反转</ion-label>
            <ion-toggle [(ngModel)]="color" (ngModelChange)="convert($event)"></ion-toggle>
          </ion-item>
          <ion-item>
            <ion-label>取色阀值</ion-label>
            <ion-range min="0" max="255" [(ngModel)]="threshold" (ngModelChange)="convert($event)">
              <ion-icon small range-left name="sunny"></ion-icon>
              <ion-icon range-right name="sunny"></ion-icon>
            </ion-range>
          </ion-item>
        </ion-col>
        <ion-col offset-1>
          <div>
            <p>这是一个完全开源的纯前端点阵液晶取模程序</p>
            <p>推荐配合Arduino u8g2库显示图像</p>
            <p>如果显示不正常，切换下大小端再试试</p>
            <p>遇到问题可以
              <a href="http://www.arduino.cn/thread-42174-1-1.html">在Arduino中文社区提问</a>
            </p>
            <p>源码可见
              <a href="https://github.com/coloz/image-to-bitmap-array">github</a>
            </p>
            <p>觉得有用的话，可以打个星星支持下</p>
          </div>
        </ion-col>
        <ion-col>
          <a href="https://union-click.jd.com/jdc?d=H6U5sb" target="_blank">
            <img src="assets/bookad.jpg">
          </a>
        </ion-col>
      </ion-row>
      <ion-row>
        <div *ngIf="imageData">
          <img [src]="imageData" image />
        </div>
        <div *ngIf="imageData">
          <h1> >>> </h1>
        </div>
        <div>
          <canvas width="300" height="300" #myCanvas result></canvas>
        </div>
      </ion-row>
    </ion-grid>

    <ion-card *ngIf="result">
      <ion-card-header>
        转换结果
      </ion-card-header>
      <ion-card-content selectable>
        {{size}}
        <br /> {{result}}
      </ion-card-content>
    </ion-card>
  </div>

</ion-content>